<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap列表组</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<style>
    main {
        margin: 1%;
        padding: 1%;
    }
</style>

<body>

    <main>
      
        <div class="row">
            <div class="col-4">
                <div class="list-group">
                    <a id="a-default-active" href="#one1" data-toggle="list" class="list-group-item list-group-item-action">列表组选项1</a>
                    <a href="#one2" data-toggle="list" class="list-group-item list-group-item-action">列表组选项2</a>
                    <a href="#one3" data-toggle="list" class="list-group-item list-group-item-action">列表组选项3</a>
                    <a href="#one4" data-toggle="list" class="list-group-item list-group-item-action">列表组选项4</a>
                </div>
            </div>
            <div class="col-8">
                <div>
                    <div id="one1" class="fade">列表组选项1的内容......</div>
                    <div id="one2" class="fade">列表组选项2的内容......</div>
                    <div id="one3" class="fade">列表组选项3的内容......</div>
                    <div id="one4" class="fade">列表组选项4的内容......</div>
                </div>
            </div>
        </div>
        

    </main>


    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script>
        $(()=>{
            $('#a-default-active').click();
        })
    </script>
</body>

</html>